<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>创建群组 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #3B82F6;
      --secondary: #10B981;
      --danger: #EF4444;
      --light: #F9FAFB;
      --dark: #1F2937;
      --light-gray: #E5E7EB;
      --dark-gray: #6B7280;
      --white: #FFFFFF;
      --border-light: #E5E7EB;
      --border-dark: #374151;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--light);
      color: var(--dark);
      height: 100vh;
      overflow-x: hidden;
      margin: 0;
    }
    
    /* 页面容器 */
    .create-group-page {
      display: none;
      height: 100vh;
      flex-direction: column;
    }
    
    .create-group-page.active {
      display: flex;
    }
    
    /* 顶部导航 */
    .page-header {
      padding: 16px;
      background-color: var(--white);
      border-bottom: 1px solid var(--border-light);
      display: flex;
      align-items: center;
      gap: 16px;
    }
    
    .dark .page-header {
      background-color: #111827;
      border-bottom-color: var(--border-dark);
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
      flex: 1;
      text-align: center;
    }
    
    .dark .header-title {
      color: var(--white);
    }
    
    .header-action {
      color: var(--primary);
      background: none;
      border: none;
      font-size: 16px;
      font-weight: 500;
      padding: 6px 10px;
    }
    
    .dark .header-action {
      color: #93C5FD;
    }
    
    .back-btn {
      color: var(--dark);
      background: none;
      border: none;
      font-size: 20px;
      padding: 4px;
    }
    
    .dark .back-btn {
      color: var(--white);
    }
    
    /* 主要内容区域 */
    .page-content {
      flex: 1;
      overflow-y: auto;
      background-color: var(--white);
    }
    
    .dark .page-content {
      background-color: #111827;
    }
    
    /* 群组信息设置 */
    .group-info-section {
      padding: 20px 16px;
      border-bottom: 1px solid var(--border-light);
    }
    
    .dark .group-info-section {
      border-bottom-color: var(--border-dark);
    }
    
    .group-avatar-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px;
    }
    
    .group-avatar {
      width: 100px;
      height: 100px;
      border-radius: 16px;
      background-color: var(--light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      color: var(--primary);
      margin-bottom: 12px;
      position: relative;
      overflow: hidden;
    }
    
    .dark .group-avatar {
      background-color: #1F2937;
    }
    
    .group-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .change-avatar-btn {
      color: var(--primary);
      font-size: 14px;
      font-weight: 500;
      background: none;
      border: none;
    }
    
    .form-group {
      margin-bottom: 20px;
    }
    
    .form-label {
      display: block;
      font-size: 14px;
      color: var(--dark-gray);
      margin-bottom: 8px;
      font-weight: 500;
    }
    
    .dark .form-label {
      color: #9CA3AF;
    }
    
    .form-control {
      width: 100%;
      padding: 12px 14px;
      border-radius: 8px;
      border: 1px solid var(--border-light);
      background-color: var(--white);
      font-size: 16px;
      transition: border-color 0.2s ease;
    }
    
    .dark .form-control {
      background-color: #1F2937;
      border-color: var(--border-dark);
      color: var(--white);
    }
    
    .form-control:focus {
      outline: none;
      border-color: var(--primary);
    }
    
    .form-hint {
      font-size: 12px;
      color: var(--dark-gray);
      margin-top: 6px;
    }
    
    .dark .form-hint {
      color: #9CA3AF;
    }
    
    textarea.form-control {
      min-height: 100px;
      resize: none;
      line-height: 1.5;
    }
    
    /* 选择联系人区域 */
    .select-contacts-section {
      padding: 16px;
    }
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .dark .section-title {
      color: var(--white);
    }
    
    .search-container {
      position: relative;
      margin-bottom: 16px;
    }
    
    .search-input {
      width: 100%;
      padding: 12px 14px 12px 40px;
      border-radius: 8px;
      border: 1px solid var(--border-light);
      background-color: var(--light);
      font-size: 15px;
    }
    
    .dark .search-input {
      background-color: #1F2937;
      border-color: var(--border-dark);
      color: var(--white);
    }
    
    .search-input:focus {
      outline: none;
      border-color: var(--primary);
    }
    
    .search-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--dark-gray);
    }
    
    .contact-group {
      margin-bottom: 20px;
    }
    
    .contact-group-title {
      font-size: 14px;
      color: var(--dark-gray);
      margin-bottom: 10px;
      padding-left: 6px;
    }
    
    .dark .contact-group-title {
      color: #9CA3AF;
    }
    
    .contact-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    
    .contact-item {
      display: flex;
      align-items: center;
      padding: 10px 6px;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }
    
    .contact-item:hover {
      background-color: var(--light);
    }
    
    .dark .contact-item:hover {
      background-color: #1F2937;
    }
    
    .contact-checkbox {
      margin-right: 12px;
      width: 20px;
      height: 20px;
      border-radius: 6px;
      border: 2px solid var(--border-light);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    
    .dark .contact-checkbox {
      border-color: var(--border-dark);
    }
    
    .contact-checkbox.checked {
      background-color: var(--primary);
      border-color: var(--primary);
      color: white;
    }
    
    .contact-avatar {
      width: 44px;
      height: 44px;
      border-radius: 8px;
      object-fit: cover;
      margin-right: 12px;
      flex-shrink: 0;
    }
    
    .contact-info {
      flex: 1;
      min-width: 0;
    }
    
    .contact-name {
      font-size: 16px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .dark .contact-name {
      color: var(--white);
    }
    
    .contact-status {
      font-size: 13px;
      color: var(--dark-gray);
    }
    
    .dark .contact-status {
      color: #9CA3AF;
    }
    
    /* 已选联系人栏 */
    .selected-contacts-bar {
      padding: 12px 16px;
      border-top: 1px solid var(--border-light);
      background-color: var(--white);
      display: flex;
      align-items: center;
      gap: 10px;
      overflow-x: auto;
    }
    
    .dark .selected-contacts-bar {
      background-color: #111827;
      border-top-color: var(--border-dark);
    }
    
    .selected-label {
      font-size: 14px;
      color: var(--dark-gray);
      white-space: nowrap;
    }
    
    .dark .selected-label {
      color: #9CA3AF;
    }
    
    .selected-avatars {
      display: flex;
      gap: -8px;
      padding: 4px 0;
    }
    
    .selected-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--white);
      position: relative;
    }
    
    .dark .selected-avatar {
      border-color: #111827;
    }
    
    .remove-selected {
      position: absolute;
      top: -4px;
      right: -4px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: var(--danger);
      color: white;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .create-btn {
      margin-left: auto;
      padding: 8px 16px;
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: 6px;
      font-weight: 500;
      font-size: 15px;
      white-space: nowrap;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 16px;
      right: 16px;
      z-index: 100;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    
    .dark .style-switcher {
      background-color: #1F2937;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    .switcher-header {
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 500;
      border-bottom: 1px solid var(--border-light);
    }
    
    .dark .switcher-header {
      border-bottom-color: var(--border-dark);
      color: var(--white);
    }
    
    .style-option {
      padding: 10px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .style-option:hover {
      background-color: var(--light);
    }
    
    .dark .style-option {
      color: var(--white);
    }
    
    .dark .style-option:hover {
      background-color: #374151;
    }
    
    .style-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 卡片风格 */
    .card-style .group-info-section,
    .card-style .select-contacts-section {
      margin: 16px;
      border-radius: 16px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      background-color: var(--white);
    }
    
    .card-style .page-content {
      background-color: var(--light);
      padding-top: 16px;
    }
    
    .card-style.dark .group-info-section,
    .card-style.dark .select-contacts-section {
      background-color: #1F2937;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }
    
    .card-style.dark .page-content {
      background-color: var(--dark);
    }
    
    /* 简约风格 */
    .minimal-style .page-header {
      padding: 12px 16px;
    }
    
    .minimal-style .group-avatar {
      width: 80px;
      height: 80px;
      font-size: 24px;
    }
    
    .minimal-style .form-control {
      padding: 10px 12px;
      font-size: 15px;
    }
    
    .minimal-style .contact-item {
      padding: 8px 6px;
    }
    
    .minimal-style .contact-avatar {
      width: 40px;
      height: 40px;
    }
    
    .minimal-style .selected-contacts-bar {
      padding: 8px 16px;
    }
    
    /* 深色模式 */
    .dark {
      background-color: var(--dark);
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .contact-item {
      animation: fadeIn 0.15s ease forwards;
    }
    
    .contact-item:nth-child(1) { animation-delay: 0.05s; }
    .contact-item:nth-child(2) { animation-delay: 0.1s; }
    .contact-item:nth-child(3) { animation-delay: 0.15s; }
    .contact-item:nth-child(4) { animation-delay: 0.2s; }
    .contact-item:nth-child(5) { animation-delay: 0.25s; }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">页面样式</div>
    <div class="style-option active" data-style="default">默认样式</div>
    <div class="style-option" data-style="dark">深色模式</div>
    <div class="style-option" data-style="card">卡片风格</div>
    <div class="style-option" data-style="minimal">简约风格</div>
  </div>
  
  <!-- 默认样式页面 -->
  <div class="create-group-page active" id="defaultPage">
    <!-- 顶部导航 -->
    <div class="page-header">
      <button class="back-btn" aria-label="返回">
        <i class="fa fa-arrow-left"></i>
      </button>
      <div class="header-title">创建群组</div>
      <button class="header-action" id="helpBtn">帮助</button>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="page-content">
      <!-- 群组信息设置 -->
      <div class="group-info-section">
        <div class="group-avatar-container">
          <div class="group-avatar">
            <i class="fa fa-users"></i>
          </div>
          <button class="change-avatar-btn">
            <i class="fa fa-camera"></i> 更换群组头像
          </button>
        </div>
        
        <div class="form-group">
          <label class="form-label" for="groupName">群组名称</label>
          <input type="text" id="groupName" class="form-control" placeholder="输入群组名称">
          <div class="form-hint">最多可输入20个字符</div>
        </div>
        
        <div class="form-group">
          <label class="form-label" for="groupDesc">群组描述</label>
          <textarea id="groupDesc" class="form-control" placeholder="描述这个群组的用途或规则"></textarea>
          <div class="form-hint">最多可输入100个字符</div>
        </div>
        
        <div class="form-group">
          <label class="form-label" for="groupType">群组类型</label>
          <select id="groupType" class="form-control">
            <option value="public">公开群 - 任何人可见，可申请加入</option>
            <option value="private">私密群 - 仅邀请可加入</option>
          </select>
        </div>
      </div>
      
      <!-- 选择联系人区域 -->
      <div class="select-contacts-section">
        <div class="section-title">
          <i class="fa fa-user-plus"></i> 选择群成员
        </div>
        
        <div class="search-container">
          <i class="fa fa-search search-icon"></i>
          <input type="text" class="search-input" placeholder="搜索联系人...">
        </div>
        
        <div class="contact-group">
          <div class="contact-group-title">常用联系人</div>
          <div class="contact-list">
            <div class="contact-item">
              <div class="contact-checkbox">
                <i class="fa fa-check" style="display: none;"></i>
              </div>
              <img src="https://picsum.photos/id/64/200/200" alt="张设计师" class="contact-avatar">
              <div class="contact-info">
                <div class="contact-name">张设计师</div>
                <div class="contact-status">UI/UX设计师 · 在线</div>
              </div>
            </div>
            
            <div class="contact-item">
              <div class="contact-checkbox">
                <i class="fa fa-check" style="display: none;"></i>
              </div>
              <img src="https://picsum.photos/id/91/200/200" alt="李小明" class="contact-avatar">
              <div class="contact-info">
                <div class="contact-name">李小明</div>
                <div class="contact-status">产品经理 · 在线</div>
              </div>
            </div>
            
            <div class="contact-item">
              <div class="contact-checkbox">
                <i class="fa fa-check" style="display: none;"></i>
              </div>
              <img src="https://picsum.photos/id/26/200/200" alt="王大锤" class="contact-avatar">
              <div class="contact-info">
                <div class="contact-name">王大锤</div>
                <div class="contact-status">后端开发 · 离线</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="contact-group">
          <div class="contact-group-title">其他联系人</div>
          <div class="contact-list">
            <div class="contact-item">
              <div class="contact-checkbox">
                <i class="fa fa-check" style="display: none;"></i>
              </div>
              <img src="https://picsum.photos/id/65/200/200" alt="赵小丽" class="contact-avatar">
              <div class="contact-info">
                <div class="contact-name">赵小丽</div>
                <div class="contact-status">插画师 · 在线</div>
              </div>
            </div>
            
            <div class="contact-item">
              <div class="contact-checkbox">
                <i class="fa fa-check" style="display: none;"></i>
              </div>
              <img src="https://picsum.photos/id/177/200/200" alt="阿强" class="contact-avatar">
              <div class="contact-info">
                <div class="contact-name">阿强</div>
                <div class="contact-status">前端开发 · 在线</div>
              </div>
            </div>
            
            <div class="contact-item">
              <div class="contact-checkbox">
                <i class="fa fa-check" style="display: none;"></i>
              </div>
              <img src="https://picsum.photos/id/188/200/200" alt="白露" class="contact-avatar">
              <div class="contact-info">
                <div class="contact-name">白露</div>
                <div class="contact-status">UI设计师 · 离线</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 已选联系人栏 -->
    <div class="selected-contacts-bar">
      <div class="selected-label">已选 <span id="selectedCount">0</span> 人</div>
      <div class="selected-avatars" id="selectedAvatars"></div>
      <button class="create-btn" id="createGroupBtn" disabled>创建群组</button>
    </div>
  </div>
  
  <!-- 深色模式页面 -->
  <div class="create-group-page dark" id="darkPage">
    <!-- 内容与默认样式相同，通过CSS类控制样式 -->
  </div>
  
  <!-- 卡片风格页面 -->
  <div class="create-group-page card-style" id="cardPage">
    <!-- 内容与默认样式相同，通过CSS类控制样式 -->
  </div>
  
  <!-- 简约风格页面 -->
  <div class="create-group-page minimal-style" id="minimalPage">
    <!-- 内容与默认样式相同，通过CSS类控制样式 -->
  </div>
  
  <!-- 帮助弹窗 -->
  <div class="modal-overlay" id="helpModal">
    <div class="modal">
      <div class="modal-header">
        <div class="modal-title">创建群组帮助</div>
        <button class="modal-close" id="closeHelpModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <p>创建群组可以方便地与多位好友同时聊天和分享信息。</p>
        <ul style="padding-left: 20px; margin-top: 10px;">
          <li>群组名称最多可输入20个字符</li>
          <li>公开群任何人可见，可申请加入</li>
          <li>私密群仅通过邀请才能加入</li>
          <li>创建后可以修改群组信息和管理成员</li>
        </ul>
      </div>
      <div class="modal-footer">
        <button class="modal-btn modal-btn-primary" id="gotItHelp">知道了</button>
      </div>
    </div>
  </div>
  
  <!-- 成功创建弹窗 -->
  <div class="modal-overlay" id="successModal">
    <div class="modal">
      <div class="modal-header">
        <div class="modal-title">创建成功</div>
        <button class="modal-close" id="closeSuccessModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <div style="text-align: center; padding: 20px 0;">
          <div style="font-size: 50px; color: var(--secondary); margin-bottom: 15px;">
            <i class="fa fa-check-circle"></i>
          </div>
          <p>群组创建成功！</p>
          <p style="margin-top: 5px; color: var(--dark-gray);">你可以开始与群成员聊天了</p>
        </div>
      </div>
      <div class="modal-footer">
        <button class="modal-btn modal-btn-primary" id="gotoChat">进入群聊</button>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 复制内容到其他样式页面
    const defaultPage = document.getElementById('defaultPage');
    document.getElementById('darkPage').innerHTML = defaultPage.innerHTML;
    document.getElementById('cardPage').innerHTML = defaultPage.innerHTML;
    document.getElementById('minimalPage').innerHTML = defaultPage.innerHTML;
    
    // 获取DOM元素
    const styleOptions = document.querySelectorAll('.style-option');
    const pageContainers = document.querySelectorAll('.create-group-page');
    const backButtons = document.querySelectorAll('.back-btn');
    const helpBtn = document.getElementById('helpBtn');
    const helpModal = document.getElementById('helpModal');
    const closeHelpModal = document.getElementById('closeHelpModal');
    const gotItHelp = document.getElementById('gotItHelp');
    const contactItems = document.querySelectorAll('.contact-item');
    const selectedCount = document.getElementById('selectedCount');
    const selectedAvatars = document.getElementById('selectedAvatars');
    const createGroupBtn = document.getElementById('createGroupBtn');
    const groupNameInput = document.getElementById('groupName');
    const successModal = document.getElementById('successModal');
    const closeSuccessModal = document.getElementById('closeSuccessModal');
    const gotoChat = document.getElementById('gotoChat');
    
    // 已选联系人列表
    let selectedContacts = [];
    
    // 当前激活的样式索引
    let currentStyleIndex = 0;
    
    // 切换页面样式
    styleOptions.forEach((option, index) => {
      option.addEventListener('click', function() {
        // 更新样式选项的活跃状态
        styleOptions.forEach(opt => opt.classList.remove('active'));
        this.classList.add('active');
        
        // 隐藏当前页面
        pageContainers.forEach(page => page.classList.remove('active'));
        
        // 显示选中的页面
        const styleId = this.getAttribute('data-style') + 'Page';
        document.getElementById(styleId).classList.add('active');
        
        // 更新当前样式索引
        currentStyleIndex = index;
        
        // 更新按钮引用
        updateButtonReferences();
        
        // 重置已选联系人（切换样式后）
        resetSelectedContacts();
      });
    });
    
    // 更新按钮引用（切换样式后）
    function updateButtonReferences() {
      const activePage = document.querySelector('.create-group-page.active');
      
      // 重新绑定返回按钮事件
      const backBtn = activePage.querySelector('.back-btn');
      if (backBtn) {
        backBtn.addEventListener('click', goBack);
      }
      
      // 重新绑定帮助按钮事件
      const helpBtn = activePage.querySelector('#helpBtn');
      if (helpBtn) {
        helpBtn.addEventListener('click', openHelpModal);
      }
      
      // 重新绑定联系人点击事件
      activePage.querySelectorAll('.contact-item').forEach(item => {
        item.addEventListener('click', toggleContactSelection);
      });
      
      // 重新绑定创建群组按钮事件
      const createBtn = activePage.querySelector('#createGroupBtn');
      if (createBtn) {
        createBtn.addEventListener('click', createGroup);
      }
      
      // 重新绑定群组名称输入事件
      const nameInput = activePage.querySelector('#groupName');
      if (nameInput) {
        nameInput.addEventListener('input', updateCreateButtonState);
      }
    }
    
    // 返回功能
    function goBack() {
      if (confirm('确定要放弃创建群组吗？已填写的信息将会丢失。')) {
        alert('返回群组列表');
      }
    }
    
    // 打开帮助弹窗
    function openHelpModal() {
      helpModal.classList.add('active');
    }
    
    // 关闭帮助弹窗
    function closeHelpModalFunc() {
      helpModal.classList.remove('active');
    }
    
    closeHelpModal.addEventListener('click', closeHelpModalFunc);
    gotItHelp.addEventListener('click', closeHelpModalFunc);
    
    // 切换联系人选择状态
    function toggleContactSelection() {
      const checkbox = this.querySelector('.contact-checkbox');
      const isChecked = checkbox.classList.contains('checked');
      const avatar = this.querySelector('.contact-avatar').src;
      const name = this.querySelector('.contact-name').textContent;
      
      if (isChecked) {
        // 取消选择
        checkbox.classList.remove('checked');
        checkbox.querySelector('i').style.display = 'none';
        
        // 从已选列表中移除
        selectedContacts = selectedContacts.filter(contact => contact.name !== name);
      } else {
        // 选中
        checkbox.classList.add('checked');
        checkbox.querySelector('i').style.display = 'block';
        
        // 添加到已选列表
        selectedContacts.push({
          name: name,
          avatar: avatar
        });
      }
      
      // 更新已选联系人显示
      updateSelectedContactsDisplay();
      
      // 更新创建按钮状态
      updateCreateButtonState();
    }
    
    // 更新已选联系人显示
    function updateSelectedContactsDisplay() {
      const activePage = document.querySelector('.create-group-page.active');
      const countEl = activePage.querySelector('#selectedCount');
      const avatarsEl = activePage.querySelector('#selectedAvatars');
      
      // 更新计数
      countEl.textContent = selectedContacts.length;
      
      // 清空现有头像
      avatarsEl.innerHTML = '';
      
      // 添加已选联系人头像
      selectedContacts.forEach((contact, index) => {
        const avatarEl = document.createElement('div');
        avatarEl.className = 'selected-avatar';
        avatarEl.innerHTML = `
          <img src="${contact.avatar}" alt="${contact.name}" class="w-100 h-100 rounded-circle">
          <div class="remove-selected" data-index="${index}">
            <i class="fa fa-times"></i>
          </div>
        `;
        avatarsEl.appendChild(avatarEl);
        
        // 添加移除事件
        avatarEl.querySelector('.remove-selected').addEventListener('click', function(e) {
          e.stopPropagation();
          const idx = parseInt(this.getAttribute('data-index'));
          removeContact(idx);
        });
      });
    }
    
    // 移除已选联系人
    function removeContact(index) {
      const contact = selectedContacts[index];
      
      // 从已选列表中移除
      selectedContacts.splice(index, 1);
      
      // 更新已选联系人显示
      updateSelectedContactsDisplay();
      
      // 更新联系人项的选中状态
      const activePage = document.querySelector('.create-group-page.active');
      activePage.querySelectorAll('.contact-item').forEach(item => {
        if (item.querySelector('.contact-name').textContent === contact.name) {
          const checkbox = item.querySelector('.contact-checkbox');
          checkbox.classList.remove('checked');
          checkbox.querySelector('i').style.display = 'none';
        }
      });
      
      // 更新创建按钮状态
      updateCreateButtonState();
    }
    
    // 更新创建按钮状态
    function updateCreateButtonState() {
      const activePage = document.querySelector('.create-group-page.active');
      const createBtn = activePage.querySelector('#createGroupBtn');
      const nameInput = activePage.querySelector('#groupName');
      
      // 群组名称不为空且至少选择一个成员
      const isEnabled = nameInput.value.trim() !== '' && selectedContacts.length > 0;
      
      if (isEnabled) {
        createBtn.removeAttribute('disabled');
        createBtn.style.opacity = '1';
        createBtn.style.cursor = 'pointer';
      } else {
        createBtn.setAttribute('disabled', 'true');
        createBtn.style.opacity = '0.6';
        createBtn.style.cursor = 'not-allowed';
      }
    }
    
    // 创建群组
    function createGroup() {
      const activePage = document.querySelector('.create-group-page.active');
      const groupName = activePage.querySelector('#groupName').value.trim();
      
      // 显示成功弹窗
      successModal.classList.add('active');
    }
    
    // 关闭成功弹窗
    function closeSuccessModalFunc() {
      successModal.classList.remove('active');
    }
    
    closeSuccessModal.addEventListener('click', closeSuccessModalFunc);
    
    // 进入群聊
    gotoChat.addEventListener('click', function() {
      closeSuccessModalFunc();
      alert('进入新创建的群聊界面');
    });
    
    // 重置已选联系人
    function resetSelectedContacts() {
      selectedContacts = [];
      
      const activePage = document.querySelector('.create-group-page.active');
      
      // 重置所有联系人项的选中状态
      activePage.querySelectorAll('.contact-item').forEach(item => {
        const checkbox = item.querySelector('.contact-checkbox');
        checkbox.classList.remove('checked');
        checkbox.querySelector('i').style.display = 'none';
      });
      
      // 更新已选联系人显示
      updateSelectedContactsDisplay();
      
      // 更新创建按钮状态
      updateCreateButtonState();
    }
    
    // 更换头像按钮事件
    document.querySelectorAll('.change-avatar-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        alert('打开图片选择器，可从相册选择或拍摄照片作为群组头像');
      });
    });
    
    // 初始化事件绑定
    backButtons[0].addEventListener('click', goBack);
    helpBtn.addEventListener('click', openHelpModal);
    
    contactItems.forEach(item => {
      item.addEventListener('click', toggleContactSelection);
    });
    
    createGroupBtn.addEventListener('click', createGroup);
    groupNameInput.addEventListener('input', updateCreateButtonState);
  </script>
</body>
</html>
